<template>
<div>
  <h2>点击次数: {{ count }}, 当前次数为 {{ evenOrOdd }}</h2>
</div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
  name: 'CountShow',

  computed: {
    // mapState返回一个对象  {'count' () {return this.$store.state['count']}}
    // ...mapState(['count']),
    // ...mapState({count2: 'count'}), // 计算属性名与state的属性名不相同
    // ...mapState({
    //   count3: state => state.count   // 回调函数, 接收参数是state, 返回值作为计算属性值
    // }),
    // ...mapState({
    //   count: state => state.counter.count   // 先读取模块, 再读取模块内的数据
    // }),
    ...mapState('counter', ['count']),

    // 'count' () {
    //   return this.$store.state['count']
    // },
    // mapGetters返回一个对象 {'evenOrOdd' () {return this.$store.getters['evenOrOdd']}}
    ...mapGetters('counter', ['evenOrOdd']),
    // evenOrOdd () {
    //   return this.$store.getters.evenOrOdd
    // }
  }
}
</script>

<style scoped>

</style>
